<template>
  <el-form-item :class="col && 'sc-list-filter-col'" :label="obj.label">
    <template v-if="obj.type === 'date'">
      <el-date-picker
        v-model="valDate"
        unlink-panels
        type="datetimerange"
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        @change="changeDate"
      ></el-date-picker>
    </template>
    <template v-else-if="obj.type === 'dateTwo'">
      <el-date-picker
        v-model="val"
        style="width: 100%;"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期时间"
        @change="changeDateTwo"
      >
      </el-date-picker>
    </template>
    <template v-else-if="obj.type === 'dateonly'">
      <el-date-picker
        v-model="valDate"
        unlink-panels
        type="daterange"
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        @change="changeDate"
      ></el-date-picker>
    </template>
    <template v-else-if="obj.type === 'select'">
      <el-select v-model="val" :placeholder="obj.placeholder || '请选择'" clearable @input="changeSelect">
        <el-option v-for="item in obj.arr" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </template>
    <template v-else>
      <el-input
        v-model="val"
        :placeholder="obj.placeholder || '请输入'"
        clearable
        @input="changeInput"
        @change="emitSearch"
      ></el-input>
    </template>
  </el-form-item>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    obj: {
      type: Object,
      default() {
        return {}
      }
    },
    objKey: {
      type: String,
      default() {
        return ''
      }
    },
    col: {
      type: Boolean,
      default() {
        return false
      }
    },
    immediateSearch: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    let that = this
    return {
      val: '',
      valDate: []
    }
  },
  computed: {
    ...mapGetters([
      'selectValue',
      'changeValue',
      'departmentValue',
      'attendanceDate',
      'serchObj',
      'pageData',
      'gateSwaitch'
    ])
  },
  watch: {
    gateSwaitch: function (newValue, oldValue) {
      if (newValue.name === 'autoGateId') {
        if (newValue === '展示') {
          this.val = 1
        } else if (newValue === '不展示') {
          this.val = 2
        }
      }
    },
    pageData: function (newValue, oldValue) {
      if (this.objKey === 'autoGateId') {
        this.val = 1
        this.$store.dispatch('user/setGateSwaitch', '展示')
      }
    },
    attendanceDate: function (newValue) {
      this.valDate = [newValue.EnterTimeStart, newValue.EnterTimeEnd]
    },
    departmentValue: function (newValue) {
      if (newValue.name === 'departmentId' && this.objKey === 'jobId') {
        this.val = ''
      }
      if (newValue.name === 'DepartmentId' && this.objKey === 'JobId') {
        this.val = ''
      }
    },
    changeValue: function (newValue, oldValue) {
      this.val = ''
      this.valDate = ''
    },
    selectValue: function (newValue, oldValue) {
      this.val = newValue
    }
  },
  created() {
    this.initItem()
  },
  mounted() {
    if (this.selectValue) {
      this.val = this.selectValue
    }
    if (this.attendanceDate.status) {
      this.valDate = [this.attendanceDate.EnterTimeStart, this.attendanceDate.EnterTimeEnd]
      this.$emit('change', { key: this.objKey, val: this.valDate })
    }
    if (this.objKey === 'autoGateId' && this.gateSwaitch === '展示') {
      this.val = 1
    } else if (this.objKey === 'autoGateId' && this.gateSwaitch === '不展示') {
      this.val = 2
      // this.emitSearch()
    }
  },
  beforeDestroy() {
    this.$bus.off('resetItem', this.busResetItem)
  },
  methods: {
    setVal() {
      this.val = ''
    },
    emitSearch() {
      if (this.immediateSearch) {
        this.$emit('search')
      }
    },
    initItem() {
      this.initFromQuery()
      this.$bus.on('resetItem', this.busResetItem)
      this.initFilter()
    },
    initFilter() {
      if (this.obj.type === 'date') {
        this.emitValDate()
      } else {
        this.emitValBase()
      }
    },
    busResetItem() {
      this.val = ''
      this.valDate = ['', '']
      this.initFilter()
    },
    initFromQuery() {
      if (this.obj.type === 'date') {
        const timeStart = this.serchObj[this.obj.start]
        const timeEnd = this.serchObj[this.obj.end]
        if (timeStart && timeEnd) {
          this.valDate = [timeStart, timeEnd]
        }
      } else {
        const validQuery = this.serchObj[this.objKey]
        if (validQuery) {
          this.val = this.obj.isNumber ? parseInt(validQuery) : validQuery
        }
      }
    },
    emitValBase() {
      this.$emit('change', { key: this.objKey, val: this.val })
    },
    emitValDate() {
      let transTime = ['', '']
      if (this.valDate) {
        transTime = this.valDate
      }
      this.$emit('change', { key: this.objKey, val: transTime })
    },
    changeDate() {
      this.emitValDate()
      this.emitSearch()
    },
    changeDateTwo() {
      this.$emit('change', { key: this.objKey, val: this.val })
    },
    changeSelect() {
      this.emitValBase()
      this.emitSearch()
      if (this.objKey === 'autoGateId') {
        this.$store.dispatch('user/setGateSwaitch', this.val === 1 ? '展示' : '不展示')
      }
    },
    changeInput() {
      this.emitValBase()
    }
  }
}
</script>

<style lang="scss" scoped></style>
